<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

import LayoutHeader from '@/layout/Header.vue'
import LayoutAside from '@/layout/Aside.vue'
import LayoutFooter from '@/layout/Footer.vue'
import MusicLyric from '@/components/common/MusicLyric.vue'
import Login from '@/components/user/Login.vue'
import { useCommonStoreHook } from '@/store/modules/common'
import { useUserStoreHook } from '@/store/modules/user'

const commonStore = useCommonStoreHook()
const loginRef = ref()
const openLogin = () => {
  loginRef.value.show()
}

// 设置key值，当登录信息发着变化让其刷新
const timekey = ref(new Date().getTime())
watch(
  () => commonStore.profile.userId,
  () => {
    timekey.value = new Date().getTime()
    useUserStoreHook().initUserPlaylist()
  }
)
onMounted(() => {
  useUserStoreHook().initUserPlaylist()
})
</script>

<template>
  <el-config-provider :locale="zhCn">
    <LayoutHeader @openLogin="openLogin" />
    <div class="music_main">
      <LayoutAside />
      <div class="router-box">
        <router-view :key="timekey" class="container"></router-view>
      </div>
      <MusicLyric />
    </div>
    <LayoutFooter />
    <Login ref="loginRef" />
  </el-config-provider>
</template>

<style lang="scss" scoped>
.music_main {
  position: relative;
  width: 100%;
  height: calc(100% - 72px - 90px);
  background: var(--music-main-color);
  display: flex;
  overflow: hidden;
  transition: all 0.4s;
}
.router-box {
  width: calc(100% - 260px);
  height: 100%;
  padding: 30px 0;
  overflow: auto;
}
.container {
  width: 1078px;
  height: 100%;
  margin: 0 auto;
}
</style>
